<template>
    <div class="assets">
      <div class="assets-header">
        <div class="header-bg"></div>
        <div class="header-content">
          <div class="title">资产信息</div>
          <div class="total-label">总资产</div>
          <div class="total-amount">{{ unserInfo.inrBalance }} INR</div>
        </div>
      </div>
      
      <div class="action-buttons">
        <div class="action-btn" @click="handleRecharge">
          <div class="icon-circle">
            <img src="../assets/assets1.png" alt="充值">
          </div>
          <span>充值</span>
        </div>
        <div class="action-btn" @click="handleWithdraw">
          <div class="icon-circle">
            <img src="../assets/assets2.png" alt="提币">
          </div>
          <span>提币</span>
        </div>
      </div>
      
      <div class="currency-list">
        <div class="currency-item" @click="goToInr">
          <div class="currency-info">
            <div class="currency-icon-wrapper">
              <img src="../assets/assets3.png" class="currency-icon" alt="INR">
            </div>
            <span class="currency-name">INR</span>
            <div class="arrow-right"></div>
          </div>
          <div class="balance-info">
            <div class="balance-row">
              <span>{{ unserInfo.availableBalance }}</span>
              <span>{{ unserInfo.frozenBalance }}</span>
              <span>{{ unserInfo.inrBalance }}</span>
            </div>
            <div class="balance-labels">
              <span>可用余额</span>
              <span>冻结</span>
              <span>余额</span>
            </div>
          </div>
        </div>
      </div>
      
      <van-tabbar v-model="active" route>
        <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/order" icon="orders-o">订单</van-tabbar-item>
        <van-tabbar-item replace to="/market" icon="chart-trending-o">市场</van-tabbar-item>
        <van-tabbar-item replace to="/assets" icon="balance-o">资产</van-tabbar-item>
        <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  
  <script setup name="Assets">
  import { ref } from 'vue';
  // import { Toast } from 'vant';
  import { UserApi } from '../api/user.api';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const active = ref(3); // Set to 3 for assets tab
  
  const handleRecharge = () => {
    // Toast('充值功能');
  };
  
  const handleWithdraw = () => {
    router.push('/withdraw'); // Navigate to withdraw page
  };
  const goToInr = () => {
    router.push('/assetsInr');
  };
  const unserInfo = ref({});
  const init = () => {
    UserApi.wallet().then(res => {
      if (res.code === 200) {
        // Handle wallet data here
        unserInfo.value = res.data;
      }
    });
  };
  init();
  </script>
  
  <style scoped>
  .assets {
    height: 100vh;
    background: #121212;
    padding-bottom: 60px;
    box-sizing: border-box;
  }
  
  .assets-header {
    position: relative;
    color: #fff;
    padding: 12px 15px 15px;
    height: 175px;
  }
  
  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 175px;
    background-image: url(../assets/assetsBg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 0;
  }
  
  .header-content {
    position: relative;
    z-index: 1;
    transform: scale(.95);
    transform-origin: top center;
  }
  
  .title {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 15px;
    color: #fff;
  }
  
  .total-label {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
  }
  
  .total-amount {
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    color: #fff;
  }
  
  .action-buttons {
    position: relative;
    margin: -45px 15px 12px;
    background: #1e1e1e;
    border-radius: 12px;
    padding: 6px 15px;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 2px 8px #0003;
    z-index: 1;
    height: 69px;
  }
  
  .action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
    background: rgba(255, 255, 255, .1);
  }
  
  .icon-circle img {
    width: 22px;
    height: 22px;
    filter: brightness(1.2);
  }
  .action-btn span{
    font-size: 12px;
    font-weight: 500;
    color: #e0e0e0;
  }
  .currency-list {
    margin: 25px 12px;
    position: relative;
    z-index: 1;
  }
  
  .currency-item {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 8px 15px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px #0003;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .currency-info {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }
  
  .currency-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .currency-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.2);
  }
  
  .currency-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }
  
  .arrow-right {
    width: 8px;
    height: 8px;
    border-top: 2px solid #b0b0b0;
    border-right: 2px solid #b0b0b0;
    transform: rotate(45deg);
    margin-right: 8px;
  }
  
  .balance-info {
    background: transparent;
    border-radius: 8px;
    padding: 4px 0;
    margin-top: 0;
  }
  
  .balance-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    text-align: center;
  }
  
  .balance-row span {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #06f;
  }
  
  .balance-labels {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  
  .balance-labels span {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: #b0b0b0;
    margin-top: 4px;
  }
  </style>